<!DOCTYPE html>
<html lang="en">
<head>
<title>编辑器</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="language" content="english">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="font/iconfont.css" />
<link rel="stylesheet" href="katex/katex.min.css" />
<link rel="stylesheet" href="highlight/styles/monokai-sublime.min.css" />
<link rel="stylesheet" href="Quill/quill.snow.css" />
<link rel="stylesheet" type="text/css" href="wuui/wu-ui/iconfont.css" />
<link rel="stylesheet" type="text/css" href="wuui/wu-ui/wu-ui.css" />
<link rel="stylesheet" href="editStyle.css" />

<style>
  body > .standalone-container {
    margin: 0px auto;
    max-width: 720px;
  }
</style>


</head>
<body>
  
<div id="app" :style="editTopStyle">
  <div class="form" >
	  <div class="form-box">
	  	  <div class="form-label">
	  	  	  标题
	  	  </div>
		  <div class="form-input">
		  	  <input placeholder="输入商品标题" type="text" v-model="title" />
		  </div>
	  </div>
  </div>
  <div id="standalone-container" class="standalone-container">
	  <div id="toolbar-container">
		<span class="ql-formats">
		  <button class="ql-bold"></button>
		  <button class="ql-italic"></button>
		  <button class="ql-underline"></button>
		  <button class="ql-strike"></button>
		  <select class="ql-color"></select>
		  <select class="ql-background"></select>
		</span>
		
		<span class="ql-formats">
		  <button class="ql-header" value="1"></button>
		  <button class="ql-header" value="2"></button>
		  <button class="ql-blockquote"></button>
		  <button class="ql-code-block"></button>
		</span>
		<span class="ql-formats">
		  <button class="ql-clean"></button>
		</span>
		<span class="ql-formats">
		  <button class="ql-list" value="ordered"></button>
		  <button class="ql-list" value="bullet"></button>
		  <button class="ql-indent" value="-1"></button>
		  <button class="ql-indent" value="+1"></button>
		  <button class="ql-direction" value="rtl"></button>
		  <select class="ql-align"></select>
		</span>
		<span class="ql-formats rule-tool">
		  <button @click="uploadPicShow=true,editType=1"><i class="iconfont icon-image"></i></button>
		  <button @click="uploadVideoShow=true,editType=1"><i class="iconfont icon-arrow-right-drop-circle"></i></button>
		  <button @click="uploadMusicShow=true,editType=1"><i class="iconfont icon-itunes"></i></button>
		  <button @click="uploadFileShow=true,editType=1"><i class="iconfont icon-attachment"></i></button>
		</span>
		
		
	  </div>
	  
  </div>
  <div id="editor-container"></div>
	<div class="form" >
		<div class="form-box">
		  <div class="form-label">
			  商品类型
		  </div>
		  <div class="form-action">
			  <template v-if="category==0">
			  		<span @click="categoryShow=true"  class="text-blue">请设置类型</span>
			  </template>
			  <template v-else>
			  		<span class="text-blue" @click="categoryShow=true">{{categoryText}}</span>
			  </template>
		  </div>
		</div>

	</div>
	<div class="standalone-shop">
		<div class="standalone-container">
			  <div id="shop-toolbar">
				<span class="ql-formats">
				  <button class="ql-bold"></button>
				  <button class="ql-italic"></button>
				  <button class="ql-underline"></button>
				  <button class="ql-strike"></button>
				  <select class="ql-color"></select>
				  <select class="ql-background"></select>
				</span>
				
				<span class="ql-formats">
				  <button class="ql-header" value="1"></button>
				  <button class="ql-header" value="2"></button>
				  <button class="ql-blockquote"></button>
				  <button class="ql-code-block"></button>
				</span>
				<span class="ql-formats">
				  <button class="ql-clean"></button>
				</span>
				<span class="ql-formats">
				  <button class="ql-list" value="ordered"></button>
				  <button class="ql-list" value="bullet"></button>
				  <button class="ql-indent" value="-1"></button>
				  <button class="ql-indent" value="+1"></button>
				  <button class="ql-direction" value="rtl"></button>
				  <select class="ql-align"></select>
				</span>
				<span class="ql-formats rule-tool">
				  <button @click="uploadPicShow=true,editType=2"><i class="iconfont icon-image"></i></button>
				  <button @click="uploadVideoShow=true,editType=2"><i class="iconfont icon-arrow-right-drop-circle"></i></button>
				  <button @click="uploadMusicShow=true,editType=2"><i class="iconfont icon-itunes"></i></button>
				  <button @click="uploadFileShow=true,editType=2"><i class="iconfont icon-attachment"></i></button>
				</span>
				
				
			  </div>
			  
		</div>
		<div id="shop-container"></div>
	</div>
	
	<div class="form">
		<div class="form-box">
			  <div class="form-label">
			  	  商品价格
			  </div>
			  <div class="form-input">
				  <input placeholder="输入商品价格(必须为整数)" type="number"  v-model="price"/>
			  </div>
		</div>
		<div class="form-box">
			  <div class="form-label">
			  	  商品数量
			  </div>
			  <div class="form-input">
				  <input placeholder="输入商品数量(必须为整数)" type="number"  v-model="num"/>
			  </div>
		</div>
		<div class="form-box border-top">
		  <div class="form-label">
			  VIP折扣
		  </div>
		  <div class="form-action">
			  <template v-if="vipDiscount==0">
			  		<span @click="vipDiscountShow=true"  class="text-blue">请设置折扣</span>
			  </template>
			  <template v-else>
			  		<span class="text-blue" @click="vipDiscountShow=true">{{vipDiscountText}}</span>
			  </template>
		  </div>
		</div>
		<div class="form-layout col-2 border-top">
			<div class="form-box">
			  <div class="form-label">
				  所在大类
			  </div>
			  <div class="form-action">
				  <template v-if="sort==0">
				  		<span @click="sortShow=true"  class="text-blue">未选择</span>
				  </template>
				  <template v-else>
				  		<span class="text-blue" @click="sortShow=true">{{sortText}}</span>
				  </template>
			  </div>
			</div>
			<div class="form-box border-none">
			  <div class="form-label">
				   所在小类
			  </div>
			  <div class="form-action">
				  <template v-if="subtypeList.length==0">
					  暂无
				  </template>
				  <template v-else>
				  		<template v-if="subtype==0">
				  				<span @click="subtypeShow=true"  class="text-blue">未选择</span>
				  		</template>
				  		<template v-else>
				  				<span class="text-blue" @click="subtypeShow=true">{{subtypeText}}</span>
				  		</template>	  
				  </template>
				 
			  </div>
			</div>
		</div>
		<div class="form" >
			<div class="form-box border-top">
			  <div class="form-label">
				  缩略图
			  </div>
			  <div class="form-action">
				  <template v-if="imgurl!=''">
					  <button type="button" @click="uploadImg()" class="text-blue">重新上传</button>
				  </template>
				  <template v-else>
				   <button type="button" @click="uploadImg()">上传图片</button>
				  </template>
			  </div>
			</div>
			<div class="form-box-pic" v-if="imgurl!=''">
				<img :src="imgurl"/>
			</div>
		</div>
		<div class="form-box" v-if="type=='add'">
			  <div class="form-label">
			  	  是否同步到动态
			  </div>
			  <div class="form-action">
				<div class="form-switch" :class="isSpace?'active':''" @click="isSpace=!isSpace">
					<div class="form-item"></div>
				</div>
			  </div>
		</div>
		<div class="form-box submit">
		  <template v-if="type=='add'">
			  <button type="button" class="form-btn" @click="addShop">发布商品</button>
		  </template>
		  <template v-else>
		  	<button type="button" class="form-btn" @click="updateShop">保存商品</button>
		  </template>
	  </div>
  </div>
	<div class="modal" :class="categoryShow?'show':''">
		<div class="modal-bg" @click="categoryShow=false">
		</div>
		<div class="modal-main">
			<div class="modal-title">
				设置类型
				<a href="javascript:;"  @click="categoryShow=false">关闭</a>
			</div>
			<div class="modal-concent">
				<div class="category-list">
					<div class="category-box" v-for="(item,index) in metaList" :class="item.active==1?'action':''" @click="toType(item.name,item.mid,index)">
						<div class="category-main">
							{{item.name}}
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="modal" :class="vipDiscountShow?'show':''">
		<div class="modal-bg" @click="vipDiscountShow=false">
		</div>
		<div class="modal-main">
			<div class="modal-title">
				设置折扣
				<a href="javascript:;"  @click="vipDiscountShow=false">关闭</a>
			</div>
			<div class="modal-concent">
				<div class="category-list">
					<div class="category-box" v-for="(item,index) in DiscountList" :class="item.value==vipDiscount?'action':''" @click="toDiscount(item.name,item.value,index)">
						<div class="category-main">
							{{item.name}}
						</div>
					</div>
	
				</div>
			</div>
		</div>
	</div>

<div class="modal" :class="sortShow?'show':''">
  	<div class="modal-bg" @click="sortShow=false">
  	</div>
  	<div class="modal-main">
  		<div class="modal-title">
  			选择大类
  			<a href="javascript:;"  @click="sortShow=false">关闭</a>
  		</div>
  		<div class="modal-concent">
  			<div class="category-list">
  				<div class="category-box" v-for="(item,index) in sortList" :class="item.id==sort?'action':''" @click="setSort(item)">
  					<div class="category-main">
  						{{item.name}}
  					</div>
  				</div>

  			</div>
  		</div>
  	</div>
  </div>
  <div class="modal" :class="subtypeShow?'show':''">
    	<div class="modal-bg" @click="subtypeShow=false">
    	</div>
    	<div class="modal-main">
    		<div class="modal-title">
    			选择小类
    			<a href="javascript:;"  @click="subtypeShow=false">关闭</a>
    		</div>
    		<div class="modal-concent">
    			<div class="category-list">
    				<div class="category-box" v-for="(item,index) in subtypeList" :class="item.id==subtype?'action':''" @click="setSubtype(item)">
    					<div class="category-main">
    						{{item.name}}
    					</div>
    				</div>
  
    			</div>
    		</div>
    	</div>
    </div>
  <div class="modal" :class="uploadPicShow?'show':''">
  	<div class="modal-bg" @click="uploadPicShow=false,linkUrl='',isLink=false">
  	</div>
  	<div class="modal-main">
  		<div class="modal-title">
  			插入图片
  			<a href="javascript:;"  @click="uploadPicShow=false,linkUrl='',isLink=false">关闭</a>
  		</div>
  		<div class="modal-concent">
  			<div class="upload-tool">
				<template v-if="isLink">
					<div class="form" >
						  <div class="form-box">
							  <div class="form-input">
							  	  <input placeholder="输入图片地址(需要http请求头)" type="text" v-model="linkUrl" />
							  </div>
						  </div>
						  <button type="button" style="background:#f57070" @click="setFileLink('image')">插入图片</button>
					</div>
					
				</template>
				<template v-if="!isLink">
					<button type="button" style="background:#0081ff" @click="chooseImage()">本地上传</button>
					<button type="button" style="background:#f57070" @click="isLink=true">远程链接</button>
				</template>
			</div>
  		</div>
  	</div>
  </div>
  <div class="modal" :class="uploadVideoShow?'show':''">
  	<div class="modal-bg" @click="uploadVideoShow=false,linkUrl='',isLink=false">
  	</div>
  	<div class="modal-main">
  		<div class="modal-title">
  			插入视频
  			<a href="javascript:;"  @click="uploadVideoShow=false,linkUrl='',isLink=false">关闭</a>
  		</div>
  		<div class="modal-concent">
  			<div class="upload-tool">
				<template v-if="isLink">
					<div class="form" >
						  <div class="form-box">
							  <div class="form-input">
							  	  <input placeholder="输入视频地址(需要http请求头)" type="text" v-model="linkUrl" />
							  </div>
						  </div>
						  <button type="button" style="background:#f57070" @click="setFileLink('video')">插入视频</button>
					</div>
					
				</template>
				<template v-if="!isLink">
					<button type="button" style="background:#0081ff" @click="chooseVideo()">本地上传</button>
					<button type="button" style="background:#f57070"  @click="isLink=true">远程链接</button>
				</template>
  				
  			</div>
  		</div>
  	</div>
  </div>
  <div class="modal" :class="uploadMusicShow?'show':''">
  	<div class="modal-bg" @click="uploadMusicShow=false,linkUrl='',isLink=false">
  	</div>
  	<div class="modal-main">
  		<div class="modal-title">
  			插入音乐
  			<a href="javascript:;"  @click="uploadMusicShow=false,linkUrl='',isLink=false">关闭</a>
  		</div>
  		<div class="modal-concent">
			
  			<div class="upload-tool">
				<template v-if="isLink">
					<div class="form" >
						  <div class="form-box">
							  <div class="form-input">
							  	  <input placeholder="输入音频地址(需要http请求头)" type="text" v-model="linkUrl" />
							  </div>
						  </div>
						  <button type="button" style="background:#f57070" @click="setFileLink('audio')">插入音频</button>
					</div>
					
				</template>
				<template v-if="!isLink">
					<button type="button" style="background:#0081ff" @click="chooseAudio()">本地上传</button>
					<button type="button" style="background:#f57070" @click="isLink=true">远程链接</button>
				</template>
  			</div>
  		</div>
  	</div>
  </div>
  <div class="modal" :class="uploadFileShow?'show':''">
  	<div class="modal-bg" @click="uploadFileShow=false,linkName='',linkUrl='',isLink=false">
  	</div>
  	<div class="modal-main">
  		<div class="modal-title">
  			插入文档
  			<a href="javascript:;"  @click="uploadFileShow=false,linkName='',linkUrl='',isLink=false">关闭</a>
  		</div>
  		<div class="modal-concent">
  			
  			<div class="upload-tool">
  				<template v-if="isLink">
  					<div class="form" >
  						  <div class="form-box">
  							  <div class="form-input">
  							  	  <input placeholder="输入超链接地址(需要http请求头)" type="text" v-model="linkUrl" />
  							  </div>
  							</div>
  							<div class="form-box">
  							
  							  <div class="form-input">
  							  	  <input placeholder="超链接名称" type="text" v-model="linkName" />
  							  </div>
  						  </div>
  						  <button type="button" style="background:#f57070" @click="setFileLink('link')">插入链接</button>
  					</div>
  					
  				</template>
  				<template v-if="!isLink">
  					<button type="button" style="background:#0081ff" @click="chooseFile()">文档&压缩包本地上传</button>
  					<button type="button" style="background:#f57070" @click="isLink=true">插入超链接</button>
  				</template>
  			</div>
  		</div>
  	</div>
  </div>
  <div class="alertTips" v-if="isVerify">
  	  <div class="alertTips-bg" @click="isVerify=false,verifyCode = ''"></div>
  	  <div class="alertTips-box">
  		  <div class="alertTips-main">
  		  		<div class="alertTips-title">
  		  			图片验证
  		  		</div>
  				<div class="alertTips-concent">
  					<div class="alertTips-concent-pic">
  						<img :src="kaptchaUrl" @click="reloadCode()"/>
  					</div>
  					<div class="alertTips-concent-input">
  						<input  type="text" v-model="verifyCode" placeholder="输入验证码"/>
  						<button type="button" @click="submit()">验证</button>
  					</div>
  				</div>
  		  </div>
  	  </div>
  </div>
  <div class="editLoading" v-if="!loading">
	  <div class="editLoading-main">
	  	  <img src="loading.gif"/>
	  </div>
  </div>
</div>



<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="axios.js"></script>
<script  type="text/javascript"src="uni.webview.1.5.4.js"></script>
<script type="text/javascript" src="wuui/wu-ui/wu-ui.js"></script>
<script type="text/javascript" src="qs.js"></script>
<script>
const request = axios.create({
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});
var quill;
var shopQuill;
var wu = new Wu()
  function getQuery(name) {
	  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	  let r = window.location.search.substr(1).match(reg);
	  if (r != null) {
		return decodeURIComponent(r[2]);
	  }
	  return null;
	}
  var app = new Vue({
    el: '#app',
    data: {
	  //控制用户操作的编辑器
	  editType:0,
	  
	  loading:false,
	  title:"",
	  type:"add",
	  id:0,
	  type:"",
	  imgurl:"",
	  price:"",
	  num:"",
	  value:"",
	  uid:"",
	  
	  shopTypelist:[],
	  sortShow:false,
	  sort:0,
	  sortText:"",
	  sortList:[],
	  subtypeShow:false,
	  subtype:0,
	  subtypeText:"",
	  subtypeList:[],
	  
	  categoryShow:false,
	  category:0,
	  categoryText:"",
	  metaList:[
	  	{
	  		"name":"实体商品",
	  		"mid":1,
			"active":0
	  	},
	  	{
	  		"name":"源码",
	  		"mid":2,
			"active":0
	  	},
	  	{
	  		"name":"软件工具",
	  		"mid":3,
			"active":0
	  	},
	  	{
	  		"name":"付费阅读",
	  		"mid":4,
			"active":0
	  	}
	  ],
	  
	  vipDiscountShow:false,
	  vipDiscountText:"无折扣",
	  vipDiscount:"1.0",
	  DiscountList:[
	  	{
	  		name:"无折扣",
	  		value:"1.0",
	  	},
	  	{
	  		name:"九折",
	  		value:"0.9",
	  	},
	  	{
	  		name:"八折",
	  		value:"0.8",
	  	},
	  	{
	  		name:"七折",
	  		value:"0.7",
	  	},
	  	{
	  		name:"六折",
	  		value:"0.6",
	  	},
	  	{
	  		name:"五折",
	  		value:"0.5",
	  	},
	  	{
	  		name:"四折",
	  		value:"0.4",
	  	},
	  	{
	  		name:"三折",
	  		value:"0.3",
	  	},
	  	{
	  		name:"二折",
	  		value:"0.2",
	  	},
	  	{
	  		name:"一折",
	  		value:"0.1",
	  	},
	  	{
	  		name:"VIP免费",
	  		value:"0.0",
	  	},
	  ],
	  
	  
	  token:"",
	  apiUrl:"http://127.0.0.4/",
	  isSpace:false,
	  isDraft:false,
	  
	  curNum:0,
	  uploadPicShow:false,
	  uploadVideoShow:false,
	  uploadMusicShow:false,
	  uploadFileShow:false,
	  shopShow:false,
	  isLink:false,
	  linkUrl:"",
	  linkName:"",
	  
	  file: null,
	  inputElement: null,
	  
	  editTopStyle:"",
	  env:"H5",
	  selectionIndex:0,
	  shopSelectionIndex:0,
	  
	  verifyLevel:0,
	  verifyCode:"",
	  kaptchaUrl:'',
	  isVerify:false,
    },
	created() {
		var that = this;
		console.log("VUE载入完成");
	},
	destroyed() {
		var that = this;
	},
	mounted() {
		var that = this;
		var timer = setTimeout(function() {
			that.loading = true;
		}, 500)
		console.log("传入数据："+getQuery('data'))
		var  data= JSON.parse(getQuery('data'));
		if(data!=null){
			that.apiUrl = data.apiUrl;
			that.id = data.id;
			that.uid = data.uid;
			that.token = data.token;
			that.type = data.type;
			that.env =  data.env;
			that.sectionid = data.sectionid;
			that.verifyLevel = data.verifyLevel,
			that.kaptchaUrl = data.apiUrl+"typechoUsers/getKaptcha"
		}
		if(that.type=='edit'){
			that.getInfo();
		}else{
			that.getShopTypelist();
		}
		if(that.env=='H5'){
			that.editTopStyle = "padding-top:44px"
		}
		
	},
	methods:{
		qs(json){
			json = window.Qs.stringify(json);
			return json;
		},
		back(){
			var that = this;
			if(that.env=='H5'){
			  localStorage.setItem('goBack',"1");
			}else{
			  var params = {
				  "type":"back",
				  "data":1
			   }
			   //如果是APP则调用外部的存储
			  uni.postMessage({
				data:params
			  });
			}
		},
		reloadCode(){
			var that = this;
			var kaptchaUrl = that.apiUrl+"typechoUsers/getKaptcha";
			var num=Math.ceil(Math.random()*10);
			kaptchaUrl += "?"+num;
			that.kaptchaUrl = kaptchaUrl;
		},
		removeObjectEmptyKey(json) {
		    var value;
		    for (var key in json) {
		        if (json.hasOwnProperty(key)) {
		            value = json[key];
		            if (value === undefined || value === '' || value === null) {
		                delete json[key]
		            }
		        }
		    }
		    return json;
		},
		submit(){
			var that = this;
			that.isVerify = false;
			if (that.verifyCode == "") {
				wu.showToast({
				    title: '请完成图片验证',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
				return false
			}
			that.addShop()
		},
		isPositiveInteger(value) {
		    const regex = /^[1-9]\d*$/;
		    return regex.test(value);
		},
		addShop() {
			var that = this;
			if (that.title == ""||that.category == 0) {
				wu.showToast({
				    title: '请输入正确的参数',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
				return false
			}
			if(!that.isPositiveInteger(that.price)){
				wu.showToast({
				    title: '价格必须为正整数',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
				return false
			}
			if(!that.isPositiveInteger(that.num)){
				wu.showToast({
				    title: '数量必须为正整数',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
				return false
			}
			var text = quill.root.innerHTML;
			var value = shopQuill.root.innerHTML;
			var isSpace = 0;
			if(that.isSpace){
				isSpace = 1;
			}
			
			var params = {
				'title':that.title,
				'type':that.category,
				'imgurl':that.imgurl,
				'price':that.price,
				'num':that.num,
				'value':value,
				'sort':that.sort,
				'subtype':that.subtype,
				'vipDiscount':that.vipDiscount,
			}
			if(that.verifyLevel > 1){
				if (that.verifyCode == "") {
					that.isVerify = true;
					return false
				}
			}
			var data = {
				"params":JSON.stringify(that.removeObjectEmptyKey(params)),
				"token":that.token,
				'text':text,
				"isSpace":isSpace,
				"isMd":0,
				'verifyCode':that.verifyCode
			}
			wu.showLoading();
			var url = that.apiUrl+'typechoShop/addShop';
			request.post(url,that.qs(data)).then(function(res){
				that.isVerify = false;
				that.verifyCode = "";
				setTimeout(function () {
					wu.hideToast();
				}, 1000);
				if(res.data.code==1){
					wu.showToast({
					    title: res.data.msg,
					    mask: false,
					    icon: 'icon-success',
					    duration: 3000
					});
					setTimeout(function() {
						that.back();
					}, 1000)
				}else{
					wu.showToast({
					    title: res.data.msg,
					    mask: false,
					    icon: 'icon-error',
					    duration: 3000
					});
				}
					
			}).catch(function (error) {
				setTimeout(function () {
					wu.hideToast();
				}, 1000);
				wu.showToast({
				    title: '网络开小差了哦',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
			});
		},
		replaceAll(string, search, replace) {
		  return string.split(search).join(replace);
		},
		isString(obj) {
		  return typeof obj === 'string';
		},
		getInfo(){
			var that = this;
			var token = "";
			var data = {
				"key":that.id,
				"token":that.token,
			}
			var url = that.apiUrl+'typechoShop/shopInfo';
			request.post(url,that.qs(data)).then(function(res){
				that.getShopTypelist();
				if(res.data.id){
					that.title = res.data.title;
					that.category = res.data.type;
					
					for(var i in that.metaList){
						if(that.metaList[i].mid == that.category){
							that.metaList[i].active==1;
							that.categoryText = that.metaList[i].name;
						}
						
					}
					
					
					that.text = res.data.text;
					that.imgurl = res.data.imgurl;
					that.price = res.data.price;
					that.num = res.data.num;
				
					that.value = res.data.value;
					that.vipDiscount = res.data.vipDiscount;
					
					that.sort = res.data.sort;
					that.subtype = res.data.subtype;
					if(res.data.text){
						var text = res.data.text;
						var delta= quill.clipboard.convert(text);
						var ops = delta.ops;
						//去除多余的换行
						for(var o in ops){
							if(that.isString(ops[o].insert)){
								ops[o].insert = that.replaceAll(ops[o].insert,"\n\n","\n");
							}
							
						}
						delta.ops = ops;
						quill.setContents(delta);
					}
					
					
					var value = res.data.value;
					var deltaValue= quill.clipboard.convert(value);
					var opsValue = deltaValue.ops;
					console.log(opsValue);
					//去除多余的换行
					for(var o in opsValue){
						if(that.isString(opsValue[o].insert)){
							opsValue[o].insert = that.replaceAll(opsValue[o].insert,"\n\n","\n");
						}
						
					}
					deltaValue.ops = opsValue;
					shopQuill.setContents(deltaValue);
				}
					
			}).catch(function (error) {
				console.log(error);
				wu.showToast({
				    title: '网络开小差了哦',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
			});

		},
		updateShop(){
			var that = this;
			var that = this;
			if (that.title == ""||that.category == 0) {
				wu.showToast({
				    title: '请输入正确的参数',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
				return false
			}
			if(!that.isPositiveInteger(that.price)){
				wu.showToast({
				    title: '价格必须为正整数',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
				return false
			}
			if(!that.isPositiveInteger(that.num)){
				wu.showToast({
				    title: '数量必须为正整数',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
				return false
			}
			var text = quill.root.innerHTML;
			var value = shopQuill.root.innerHTML;
			var isSpace = 0;
			if(that.isSpace){
				isSpace = 1;
			}
			var params = {
				'id':that.id,
				'type':that.category,
				'imgurl':that.imgurl,
				'price':that.price,
				'num':that.num,
				'value':value,
				'vipDiscount':that.vipDiscount,
				'sort':that.sort,
				'subtype':that.subtype,
			}
			var data = {
				"params":JSON.stringify(that.removeObjectEmptyKey(params)),
				"token":that.token,
				'text':text,
				"isMd":0
			}
			wu.showLoading();
			var url = that.apiUrl+'typechoShop/editShop';
			request.post(url,that.qs(data)).then(function(res){
				setTimeout(function () {
					wu.hideToast();
				}, 1000);
				
				if(res.data.code==1){
					wu.showToast({
					    title: res.data.msg,
					    mask: false,
					    icon: 'icon-success',
					    duration: 3000
					});
					setTimeout(function() {
						that.back();
					}, 1000)
				}else{
					wu.showToast({
					    title: res.data.msg,
					    mask: false,
					    icon: 'icon-error',
					    duration: 3000
					});
					
				}
					
			}).catch(function (error) {
				setTimeout(function () {
					wu.hideToast();
				}, 1000);
				wu.showToast({
				    title: '网络开小差了哦',
				    mask: false,
				    icon: 'icon-info',
				    duration: 3000
				});
			});
		},
		getShopTypelist(){
			var that = this;
			var data = {
				"limit":100,
				"token":that.token
			}
			var url = that.apiUrl+'typechoShop/shopTypeList';
			
			//console.log(JSON.stringify(url));
			request.post(url,that.qs(data)).then(function(res){
				if(res.data.code==1){
					that.shopTypelist = res.data.data;
					var list = res.data.data;
					var sortList = [];
					for(var i in list){
						if(list[i].parent==0){
							sortList.push(list[i]);
						}
					}
					that.sortList = sortList;
					if(that.sort > 0){
						for(var s in sortList){
							if(sortList[s].id==that.sort){
								that.setSort(sortList[s],true);
							}
						}
					}
				}
					
			}).catch(function (error) {
				console.log(error);
			});
		},
		setSort(data,noSub){
			var that = this;
			that.sortShow = false;
			that.sort = data.id;
			that.sortText = data.name;
			
			if(that.sort != 0){
				var list = that.shopTypelist;
				var subtypeList = [];
				for(var i in list){
					if(list[i].parent==that.sort){
						subtypeList.push(list[i]);
					}
				}
				that.subtypeList = subtypeList;
				if(!noSub){
					if(subtypeList.length>0){
						that.subtype = subtypeList[0].id;
						that.subtypeText =  subtypeList[0].name;
					}else{
						that.subtype = 0;
					}
				}else{
					if(subtypeList.length>0){
						for(var s in subtypeList){
							if(subtypeList[s].id == that.subtype){
								that.subtypeText =  subtypeList[s].name;
							}
						}
					}else{
						that.subtype = 0;
					}
				}
				
				
			}
			
		},
		setSubtype(data){
			var that = this;
			that.subtypeShow = false;
			that.subtype = data.id;
			that.subtypeText = data.name;
		},
		formatDate(datetime) {
			var datetime = new Date(parseInt(datetime * 1000));
			var year = datetime.getFullYear(),
				month = ("0" + (datetime.getMonth() + 1)).slice(-2),
				date = ("0" + datetime.getDate()).slice(-2),
				hour = ("0" + datetime.getHours()).slice(-2),
				minute = ("0" + datetime.getMinutes()).slice(-2);
			var result = year + "-" + month + "-" + date + " " + hour + ":" + minute;
			return result;
		},
		toType(title,id,index){
			var that = this;
			var metaList = that.metaList;
			for(var i in metaList){
				metaList[i].active=0;
			}
			that.metaList = metaList;
			that.metaList[index].active==1;
			that.categoryText = title;
			that.category = id;
			that.categoryShow = false;
		},
		toDiscount(name,value){
			var that = this;
			that.vipDiscountText = name;
			that.vipDiscount = value;
			that.vipDiscountShow = false;
		},
		//上传的相关方法
		//上传的相关方法
		chooseImage() {
		    var that = this;
		    if (this.inputElement) {
		        // 如果 inputElement 已存在，移除之前的元素
		        this.inputElement.remove();
		    }
		
		    this.inputElement = document.createElement('input');
		    this.inputElement.type = 'file';
		    this.inputElement.accept = 'image/*'; // 只接受图片文件
		    this.inputElement.multiple = true; // 允许选择多个文件
		    this.inputElement.addEventListener('change', (event) => {
		        if (event.target.files.length > 9) {
		            // 如果选择的文件超过9个，显示错误消息
		            wu.showToast({
		                title: '最多只能选择9张图片',
		                mask: false,
		                icon: 'icon-error',
		                duration: 3000
		            });
		            return; // 不继续执行后面的代码
		        }
		
		        // 循环处理每个选中的文件
		        Array.from(event.target.files).forEach((file) => {
		            if (this.isImageFile(file)) {
		                // 处理每个图片文件的上传
		                // 注意：您需要根据实际逻辑调整这里的上传方法
		                this.file = file;
		                that.uploadFile("image");
		            } else {
		                // 非图片文件，进行错误处理
		                wu.showToast({
		                    title: '所有文件必须是图片',
		                    mask: false,
		                    icon: 'icon-error',
		                    duration: 3000
		                });
		            }
		        });
		
		        // 选择文件后销毁 inputElement
		        this.inputElement.remove();
		        this.inputElement = null;
		    });
		
		    this.inputElement.click();
		},
		uploadImg() {
		  var that = this;
		  if (this.inputElement) {
			// 如果 inputElement 已存在，移除之前的元素
			this.inputElement.remove();
		  }
	
		  this.inputElement = document.createElement('input');
		  this.inputElement.type = 'file';
		  this.inputElement.accept = 'image/*'; // 只接受图片文件
		  
		  this.inputElement.addEventListener('change', (event) => {
			const file = event.target.files[0];
			if (this.isImageFile(file)) {
			  this.file = file;
			  that.uploadFile("thumbnail");
			} else {
			  // 非图片文件，进行错误处理
			  wu.showToast({
			      title: '请选择图片文件',
			      mask: false,
			      icon: 'icon-error',
			      duration: 3000
			  });
			}
	
			// 选择文件后销毁 inputElement
			this.inputElement.remove();
			this.inputElement = null;
		  });
		  
		  this.inputElement.click();
		},
		chooseVideo() {
		  var that = this;
		  if (this.inputElement) {
			this.inputElement.remove();
		  }
	
		  this.inputElement = document.createElement('input');
		  this.inputElement.type = 'file';
		  this.inputElement.accept = 'video/*'; // 只接受视频文件
		  
		  this.inputElement.addEventListener('change', (event) => {
			const file = event.target.files[0];
			if (this.isVideoFile(file)) {
			  this.file = file;
			  that.uploadFile("video");
			} else {
			  wu.showToast({
			      title: '请选择MP4视频文件',
			      mask: false,
			      icon: 'icon-error',
			      duration: 3000
			  });
			}
	
			this.inputElement.remove();
			this.inputElement = null;
		  });
		  
		  this.inputElement.click();
		},
		chooseAudio() {
		  var that = this;
		  if (this.inputElement) {
			this.inputElement.remove();
		  }
	
		  this.inputElement = document.createElement('input');
		  this.inputElement.type = 'file';
		  this.inputElement.accept = 'audio/*'; // 只接受音频文件
		  
		  this.inputElement.addEventListener('change', (event) => {
			const file = event.target.files[0];
			if (this.isAudioFile(file)) {
			  this.file = file;
			  that.uploadFile("audio");
			} else {
			  wu.showToast({
			      title: '请选择音频文件',
			      mask: false,
			      icon: 'icon-error',
			      duration: 3000
			  });
			}
	
			this.inputElement.remove();
			this.inputElement = null;
		  });
		  
		  this.inputElement.click();
		},
		chooseFile() {
		  var that = this;
		  if (this.inputElement) {
			this.inputElement.remove();
		  }
			
		  this.inputElement = document.createElement('input');
		  this.inputElement.type = 'file';
			this.inputElement.accept = '.txt, .pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation';
		
		  
		  this.inputElement.addEventListener('change', (event) => {
			const file = event.target.files[0];
			if (this.isDocumentFile(file)) {
			  this.file = file;
			  that.uploadFile("file");
			} else {
			  wu.showToast({
			      title: '请选择文档文件',
			      mask: false,
			      icon: 'icon-error',
			      duration: 3000
			  });
			}
			
			this.inputElement.remove();
			this.inputElement = null;
		  });
		  
		  this.inputElement.click();
		},
		uploadFile(type) {
		  var that = this;
		  if (that.file) {
			// 上传文件到服务器
			const formData = new FormData();
			formData.append('file', that.file);
			formData.append('token', that.token);
			var url = that.apiUrl+'upload/full';
			wu.showLoading();
			//console.log(JSON.stringify(url));
			request.post(url,formData).then(function(res){
				setTimeout(function () {
					wu.hideToast();
				}, 1000);
				if(res.data.code==1){
					var url = res.data.data.url;
					var selectionIndex = that.selectionIndex;
					var curQuill = quill;
					if(that.editType==2){
						curQuill = shopQuill;
						selectionIndex = that.shopSelectionIndex;
					}
					if(type=="image"){
						
						curQuill.insertEmbed(selectionIndex, "image", url);
					}
					if(type == "thumbnail"){
						that.imgurl = url;
					}
					if(type=="video"){
						//调用自定义的方法
						curQuill.insertEmbed(selectionIndex, 'simpleVideo', {
						  url,
						  controls: 'controls',
						  width: '100%',
						  height: 'auto'
						})
					}
					if(type=="audio"){
						//调用自定义的方法
						curQuill.insertEmbed(selectionIndex, "audio", { url: url });
					}
					wu.showToast({
					    title: "上传成功",
					    mask: false,
					    icon: 'icon-success',
					    duration: 3000
					});
					
				}else{
					wu.showToast({
					    title: '上传失败，请检测网络或接口配置',
					    mask: false,
					    icon: 'icon-error',
					    duration: 3000
					});
				}
					
			}).catch(function (error) {
				console.log(error);
				wu.showToast({
				    title: '上传失败，请检测网络',
				    mask: false,
				    icon: 'icon-error',
				    duration: 3000
				});
			});
		  } else {
			wu.showToast({
			    title: '请选择文件',
			    mask: false,
			    icon: 'icon-error',
			    duration: 3000
			});
		  }
		},
		isImageFile(file) {
		  const acceptedImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
		  return acceptedImageTypes.includes(file.type);
		},
		isVideoFile(file) {
		  const acceptedVideoTypes = ['video/mp4'];
		  return acceptedVideoTypes.includes(file.type);
		},
		isAudioFile(file) {
		  const acceptedAudioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/mp3'];
		  return acceptedAudioTypes.includes(file.type);
		},
		isDocumentFile(file) {
		  const acceptedTypes = ['text/plain', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'];
		  return acceptedTypes.includes(file.type);
		},
		setFileLink(type){
			var that = this;
			if(that.linkUrl==''){
				wu.showToast({
				    title: '请输入链接',
				    mask: false,
				    icon: 'icon-error',
				    duration: 3000
				});
			}
			if(type == "link"){
				
				if(that.linkName==''){
					wu.showToast({
					    title: '请输入超链接名称',
					    mask: false,
					    icon: 'icon-error',
					    duration: 3000
					});
				}
			}
			var url = that.linkUrl;
			var selectionIndex = that.selectionIndex;
			var curQuill = quill;
			if(that.editType==2){
				curQuill = shopQuill;
				selectionIndex = that.shopSelectionIndex;
			}
			if(type=="image"){
				
				curQuill.insertEmbed(selectionIndex, "image", url);
			}
			if(type=="video"){
				//调用自定义的方法
				// quill.insertEmbed(length, "video", url);
				curQuill.insertEmbed(selectionIndex, 'simpleVideo', {
				  url,
				  controls: 'controls',
				  width: '100%',
				  height: 'auto'
				})
			}
			if(type=="audio"){
				//调用自定义的方法
				curQuill.insertEmbed(selectionIndex, "audio", { url: url });
			}
			if(type=="link"){
				curQuill.insertEmbed(selectionIndex,'link', { href: url, innerText: that.linkName }, "api")
			}
			
		},
	}
  })
</script>
<script src="katex/katex.min.js"></script>
<script src="highlight/highlight.min.js"></script>
<script src="Quill/quill.min.js"></script>
<script>

  //视频自定义
  const BlockEmbed = Quill.import('blots/block/embed')
  class VideoBlot extends BlockEmbed {
    static create (value) {
      let node = super.create()
      node.setAttribute('src', value.url)
      node.setAttribute('controls', value.controls)
      node.setAttribute('width', value.width)
      node.setAttribute('height', value.height)
      node.setAttribute('webkit-playsinline', true)
      node.setAttribute('playsinline', true)
      node.setAttribute('x5-playsinline', true)
      return node;
    }
   
    static value (node) {
      return {
        url: node.getAttribute('src'),
        controls: node.getAttribute('controls'),
        width: node.getAttribute('width'),
        height: node.getAttribute('height')
      };
    }
  }
  VideoBlot.blotName = 'simpleVideo'
  VideoBlot.tagName = 'video'
  Quill.register(VideoBlot);
  //音频自定义
  class AudioBlot extends BlockEmbed {
  	static create(value) {
  		let node = super.create();
  		node.setAttribute('src', value.url);   //设置audio的src属性
  		node.setAttribute('controls', true);   //设置audio的controls，否则他将不会显示
  		node.setAttribute('controlsList', 'nodownload');   //设置audio的下载功能为不能下载
  		node.setAttribute('id', 'voice');     //设置一个id
  		return node;
  	}
  }
  AudioBlot.blotName = 'audio';
  AudioBlot.tagName = 'audio';
  Quill.register(AudioBlot);
  const Link = Quill.import("formats/link");
  // 自定义a链接
  class FileBlot extends Link {
    // 继承Link Blot
    static create (value) {
      let node = undefined;
      if (value && !value.href) {
        // 适应原本的Link Blot
        node = super.create(value)
      } else {
        // 自定义Link Blot
        node = super.create(value.href)
        node.href = value.href
        node.innerText = value.innerText
        // node.setAttribute('download', value.innerText);  // 左键点击即下载
      }
      return node;
    }
  }
  FileBlot.blotName = "link" // 这里不用改，如果需要也可以保留原来的，这里用个新的blot
  FileBlot.tagName = "A"
  Quill.register(FileBlot) // 注册link
	//vue渲染完后再开启编辑器渲染
	quill = new Quill('#editor-container', {
		modules: {
		formula: true,
		syntax: true,
		toolbar: '#toolbar-container'
		},
		placeholder: '请输入商品介绍',
		theme: 'snow'
	});
	//vue渲染完后再开启编辑器渲染
	shopQuill = new Quill('#shop-container', {
		modules: {
		formula: true,
		syntax: true,
		toolbar: '#shop-toolbar'
		},
		placeholder: '请输入商品付费内容，对于实体商品，可以设置为联系信息。',
		theme: 'snow'
	});
  quill.on('text-change', function(delta, oldDelta, source) {
	  //实时获取光标位置
	  let selection = quill.getSelection(true);
	  
	  app.selectionIndex = selection.index;
  });
  shopQuill.on('text-change', function(delta, oldDelta, source) {
  	  //实时获取光标位置
  	  let selection = shopQuill.getSelection(true);
  	  
  	  app.shopSelectionIndex = selection.index;
  });
  
  
</script>
</body>
</html>
